<template>
  <Container type="page">
      <div class="stats-grid">
      <div class="stat-card stat-card--blue">
        <div class="stat-icon users"><i class="fas fa-users"></i></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalUsers }}</div>
          <div class="stat-label">总用户数</div>
        </div>
      </div>
      
      <div class="stat-card stat-card--green">
        <div class="stat-icon articles"><i class="fas fa-newspaper"></i></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalArticles }}</div>
          <div class="stat-label">总文章数</div>
        </div>
      </div>
      
      <div class="stat-card stat-card--orange">
        <div class="stat-icon published"><i class="fas fa-check-circle"></i></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.publishedArticles }}</div>
          <div class="stat-label">已发布文章</div>
        </div>
      </div>
      
      <div class="stat-card stat-card--purple">
        <div class="stat-icon draft"><i class="fas fa-file-alt"></i></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.draftArticles }}</div>
          <div class="stat-label">草稿文章</div>
        </div>
      </div>
    </div>
    
    <div class="content-grid">
      <div class="recent-articles">
        <h3><i class="fas fa-newspaper"></i> 最近文章</h3>
        <div class="article-list">
          <div v-for="article in recentArticles" :key="article.id" class="article-item">
            <div class="article-title">
              <i class="fas fa-file-alt"></i> {{ article.title }}
            </div>
            <div class="article-meta">
              <span class="status-badge" :class="article.status.toLowerCase()">
                <i :class="getStatusIcon(article.status)"></i>
                {{ getStatusText(article.status) }}
              </span>
              <span class="article-date">
                <i class="fas fa-clock"></i> {{ formatDate(article.createdAt) }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="recent-users">
        <h3><i class="fas fa-users"></i> 最近用户</h3>
        <div class="user-list">
          <div v-for="user in recentUsers" :key="user.id" class="user-item">
            <div class="user-avatar">
              <i class="fas fa-user"></i>
            </div>
            <div class="user-info">
              <div class="user-name">
                <i :class="user.isAdmin ? 'fas fa-crown' : 'fas fa-user-circle'"></i>
                {{ user.fullName || user.username }}
              </div>
              <div class="user-meta">
                <span class="user-role" :class="{ admin: user.isAdmin }">
                  <i :class="user.isAdmin ? 'fas fa-user-shield' : 'fas fa-user'"></i>
                  {{ user.isAdmin ? '管理员' : '普通用户' }}
                </span>
                <span class="user-date">
                  <i class="fas fa-calendar-alt"></i> {{ formatDate(user.createdAt) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Container>
</template>

<script>
import { userAPI } from '@api/user.js'
import { articleAPI } from '@api/article.js'
import Container from '@components/Container.vue'

export default {
  name: 'Dashboard',
  components: {
    Container
  },
  data() {
    return {
      stats: {
        totalUsers: 0,
        totalArticles: 0,
        publishedArticles: 0,
        draftArticles: 0
      },
      recentArticles: [],
      recentUsers: []
    }
  },
  mounted() {
    this.loadStats()
    this.loadRecentData()
  },
  methods: {
    async loadStats() {
      try {
        const [usersResponse, articlesResponse] = await Promise.all([
          userAPI.getUserStats(),
          articleAPI.getArticleStats()
        ])
        
        if (usersResponse.data.success) {
          this.stats.totalUsers = usersResponse.data.totalUsers
        }
        
        if (articlesResponse.data.success) {
          this.stats.totalArticles = articlesResponse.data.totalArticles
        }
        
        // 获取文章状态统计
        const articlesResponse2 = await articleAPI.getAllArticles()
        if (articlesResponse2.data.success) {
          const articles = articlesResponse2.data.data
          this.stats.publishedArticles = articles.filter(a => a.status === 'PUBLISHED').length
          this.stats.draftArticles = articles.filter(a => a.status === 'DRAFT').length
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
      }
    },
    
    async loadRecentData() {
      try {
        const [articlesResponse, usersResponse] = await Promise.all([
          articleAPI.getAllArticles(),
          userAPI.getAllUsers()
        ])
        
        if (articlesResponse.data.success) {
          this.recentArticles = articlesResponse.data.data
            .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
            .slice(0, 5)
        }
        
        if (usersResponse.data.success) {
          this.recentUsers = usersResponse.data.data
            .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
            .slice(0, 5)
        }
      } catch (error) {
        console.error('加载最近数据失败:', error)
      }
    },
    
    getStatusText(status) {
      const statusMap = {
        'DRAFT': '草稿',
        'PUBLISHED': '已发布',
        'ARCHIVED': '已归档'
      }
      return statusMap[status] || status
    },
    
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString('zh-CN')
    },
    
    getStatusIcon(status) {
      const iconMap = {
        'DRAFT': 'fas fa-file-alt',
        'PUBLISHED': 'fas fa-check-circle',
        'ARCHIVED': 'fas fa-archive'
      }
      return iconMap[status] || 'fas fa-file'
    }
  }
}
</script>

<style scoped lang="scss">

.dashboard {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 确保所有直接子元素不超出容器 */
.stats-grid,
.content-grid,
.recent-users,
.recent-articles {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  transition: all var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
}

/* 蓝色主题 - 用户 */
.stat-card--blue {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(100, 181, 246, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(33, 150, 243, 0.4);
}

.stat-card--blue::before {
  background: linear-gradient(90deg, rgba(33, 150, 243, 0.8) 0%, rgba(100, 181, 246, 0.6) 100%);
}

.stat-card--blue:hover {
  box-shadow: 0 12px 40px rgba(33, 150, 243, 0.2);
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.25) 0%, rgba(100, 181, 246, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
}

.stat-card--blue .stat-number {
  color: #64b5f6;
  text-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

.stat-card--blue .stat-icon {
  background: linear-gradient(135deg, rgba(66, 165, 245, 0.8) 0%, rgba(33, 150, 243, 0.9) 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4);
  backdrop-filter: blur(5px);
}

/* 绿色主题 - 文章 */
.stat-card--green {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(102, 187, 106, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(76, 175, 80, 0.4);
}

.stat-card--green::before {
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%);
}

.stat-card--green:hover {
  box-shadow: 0 12px 40px rgba(76, 175, 80, 0.2);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(102, 187, 106, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
}

.stat-card--green .stat-number {
  color: #66bb6a;
  text-shadow: 0 0 10px rgba(102, 187, 106, 0.3);
}

.stat-card--green .stat-icon {
  background: linear-gradient(135deg, rgba(102, 187, 106, 0.8) 0%, rgba(76, 175, 80, 0.9) 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
  backdrop-filter: blur(5px);
}

/* 橙色主题 - 已发布 */
.stat-card--orange {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 183, 77, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 152, 0, 0.4);
}

.stat-card--orange::before {
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%);
}

.stat-card--orange:hover {
  box-shadow: 0 12px 40px rgba(255, 152, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.25) 0%, rgba(255, 183, 77, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
}

.stat-card--orange .stat-number {
  color: #ffb74d;
  text-shadow: 0 0 10px rgba(255, 183, 77, 0.3);
}

.stat-card--orange .stat-icon {
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.8) 0%, rgba(255, 152, 0, 0.9) 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4);
  backdrop-filter: blur(5px);
}

/* 紫色主题 - 草稿 */
.stat-card--purple {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.2) 0%, rgba(186, 104, 200, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(156, 39, 176, 0.4);
}

.stat-card--purple::before {
  background: linear-gradient(90deg, rgba(156, 39, 176, 0.8) 0%, rgba(186, 104, 200, 0.6) 100%);
}

.stat-card--purple:hover {
  box-shadow: 0 12px 40px rgba(156, 39, 176, 0.2);
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.25) 0%, rgba(186, 104, 200, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
}

.stat-card--purple .stat-number {
  color: #ba68c8;
  text-shadow: 0 0 10px rgba(186, 104, 200, 0.3);
}

.stat-card--purple .stat-icon {
  background: linear-gradient(135deg, rgba(186, 104, 200, 0.8) 0%, rgba(156, 39, 176, 0.9) 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(156, 39, 176, 0.4);
  backdrop-filter: blur(5px);
}

.stat-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-icon i {
  font-size: 1.5rem;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #e5eaf3;
  margin-bottom: 0.25rem;
}

.stat-label {
  color: #a3a6ad;
  font-size: 0.85rem;
  font-weight: 500;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.recent-articles, .recent-users {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.recent-articles h3, .recent-users h3 {
  margin: 0 0 1rem 0;
  color: #e5eaf3;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.recent-articles h3 i,
.recent-users h3 i {
  color: var(--color-primary);
}

.article-list, .user-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-item {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.article-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.article-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(5px);
  transform: translateX(5px);
}

.article-title {
  font-weight: 600;
  color: #e5eaf3;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.article-title i {
  color: #a3a6ad;
  font-size: 0.9rem;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.status-badge.draft {
  background: #e3f2fd;
  color: #1565c0;
}

.status-badge.published {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.archived {
  background: #fff3e0;
  color: #e65100;
}

.article-date {
  font-size: 0.75rem;
  color: #a3a6ad;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.user-date {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-fast);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.user-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.user-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(5px);
  transform: translateX(5px);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5eaf3;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: #e5eaf3;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.user-name i {
  color: #a3a6ad;
  font-size: 0.9rem;
}

.user-name i.fa-crown {
  color: #f59e0b;
}

.user-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-role {
  font-size: 0.75rem;
  color: #a3a6ad;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.user-role.admin {
  color: #dc3545;
  font-weight: 600;
}

.user-role i {
  font-size: 0.8rem;
}

.user-date {
  font-size: 0.8rem;
  color: #a3a6ad;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-icon {
    font-size: 2rem;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
}

/* 按钮样式已在全局样式中定义 */
</style>
